<template>
  <div class="k-menu" :style="{ width: asideWidth }">
    <el-scrollbar height="100%">
      <el-menu
        class="!border-0"
        @select="handleSelect"
        :collapse="isCollapse"
        :default-active="$route.path"
        :collapse-transition="false"
        unique-opened
      >
        <template v-for="item in userStore.menus" :key="item.id">
          <el-sub-menu
            :index="item.name"
            v-if="item.child && item.child.length > 0"
          >
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="v in item.child"
              :index="v.frontpath"
              :key="v.id"
            >
              <el-icon>
                <component :is="v.icon"></component>
              </el-icon>
              <span>{{ v.name }}</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="item.frontpath">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
const settingStore = useSettingStore()
const userStore = useUserStore()
const router = useRouter()
const asideWidth = computed(() => settingStore.asideWidth) //侧边栏宽度
const isCollapse = computed(() => !(settingStore.asideWidth === '250px')) //是否折叠
/**
 * 路由跳转方法
 * @param path 路径
 */
const handleSelect = (path: string) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.k-menu {
  transition: var(--k-transition);
  border-right: 1px solid var(--el-border-color);
  @apply bg-light-50 select-none  absolute left-0 bottom-0 top-[64px];
}
</style>
